<template>
    <div>
        <!-- 搜索框 -->
       <div class="Search">
         <van-search @clear="showHotList" @search="getSearch()" @input="change" shape="round" v-model="value" placeholder="请输入搜索关键词" />
       </div>

        <!-- 热门搜索 -->
        <div v-show="ishot" class="Search-hot-history">
            <div class="hs">热门搜索</div>
            <div class="Search-hot-items">
                <div class="Search-hot-item" @click="getHotSearch(item.first)" v-for="(item,index) in hotList" :key="index">{{item.first}}</div>
            </div>
        

                
            <div class="search-his">
                    
                <div class="search-his-item" @click="getHotSearch(item)" v-for="(item,index) in rec" :key="index">
                    <div class="timepic"><img src="../assets/time.svg" alt=""></div>
                    <div class="text">{{item}}</div>
                    <div class="del" @click.stop="del(index)"><img src="../assets/del.svg" alt=""></div>
                </div>  
            </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="list-box" v-show="!ishot">
            <div v-show="searchSong" >
                <div class="searchitem">搜索'{{value}}'</div>
                <div class="searchjianyi" @click="getHotSearch(item.keyword)" v-for="(item,index) in jianyi1" :key="index">
                    <img src="../assets/搜索.png" alt="" width="16px" height="16px">
                    {{item.keyword}}
                </div>
            </div>
           <div v-show="!searchSong">
                <div class="searchMvp" v-if="SearchData.length>0">
                    <div class="mvptitle">最佳匹配</div>
                    <div class="mvpgetshow" v-for="(item,index) in searchMvp" :key="index">
                         <div class="getshow">
                            <img class="mvppic" :src="item.artist.picUrl" width="55px" height="50px" alt="">
                            <div class="artist-box">
                                <div class="artist-name">歌手:{{item.artist.name}}({{item.artist.alias[0]}})</div>
                            </div>
                            <img class="mvp-right" src="../assets/向右1.png" alt="" width="24px" height="24px"> 
                         </div>
                    </div>
                </div>
           </div>
           <div class="list" v-for="(item,index) in SearchData" :key="index">
                <div class="list-desc">
                    <div class="list-desc-top">{{item.al.name}}</div>
                    <div class="list-desc-bottom-box">
                        <div></div>
                        <div class="list-desc-bottom">{{item.ar[0].name}} - {{item.al.name}}</div>
                    </div>
                </div>
                <div @click="getId(item)">
                    <div v-show="item.isplay" class="play">
                        <img src="../assets/下载.gif" alt="">
                    </div>
                    <div v-show="!item.isplay" class="list-icon"></div>
                </div>
            </div>
            <audio ref="audio" autoplay :src="`https://music.163.com/song/media/outer/url?id=${url}.mp3`"></audio>
        </div>

    </div>
</template>

<script>
    export default {
        name:"Search",
        data(){
            return{
                //输入框的内容，搜索关键字
                value:"",
                hotList:[],
                //控制热搜显示隐藏
                ishot:true,
                //这是搜索出来的数据
                SearchData:[],
                //存放搜索记录
                rec:[],
                //存放搜索建议
                jianyi1:[],
                //最佳搜索
                searchMvp:[],
                //搜索提示开关
                searchSong:true
            };
        },
        created(){
            let a = JSON.parse(localStorage.getItem("history"))
            if(a){
                this.rec = a
            }
            this.getSearchHotList();
        },
        methods:{
            //重新搜索
            again(){
                this.searchSong=true;
            },
            //点击删除
            //函数实参/形参
            del(e){
                this.rec.splice(e,1)
                localStorage.setItem("history",JSON.stringify(this.rec))
            },
            //点击热搜搜索对应内容 同时隐藏热搜模块
            getHotSearch(e){
                console.log(e);
                this.value = e;
                this.change();
                this.getSearch();
            },
            //输入框内容变化时，把热搜隐藏
            change(){
               
                this.ishot=false;
                 setTimeout(()=>{
                    this.jianyi()
                 },100)
            },
            showHotList(){
                this.ishot=true;
            },
            //搜索方法
            getSearch(){
                this.searchSong=false;
                if( this.value.length==0){
                    alert("无搜索结果")
                    return
                }
                //把关键字存到rec这个数组 往数组前面添加数据
                this.rec.unshift(this.value)
                //数组去重
                let arr = Array.from(new Set(this.rec))
                //把去重之后的数据(arr)存到本地存储(序列化)
                localStorage.setItem("history",JSON.stringify(arr))
                //取数据
                let a = JSON.parse(localStorage.getItem("history"))
                if(a){
                    this.rec = a
                }
                
                this.getSearchMvp();
                this.axios({
                    method:"get",
                    url:"/cloudsearch",
                    params:{
                        keywords:this.value,
                        limit:20,
                    },
                }).then((res)=>{
                    res.data.result.songs.forEach((item)=>{
                        item.isplay=false
                    })
                    this.SearchData=res.data.result.songs;
                    console.log("这是搜索结果=>",res.data.result);
                });
            },
            //最佳匹配
            getSearchMvp(){
                this.axios({
                    method:"get",
                    url:"/search/multimatch",
                    params:{
                        keywords:this.value,
                        limit:10
                    },
                }).then((res)=>{
                    this.serchMvp=res.data.result.album
                   console.log("这是最佳匹配=>",res);
                });
            },
            //获取热搜列表
            getSearchHotList(){
                this.axios({
                    method:"get",
                    url:"/search/hot"
                }).then((res)=>{
                    this.hotList=res.data.result.hots
                    // console.log(this.hotList);
                });
            },
            //搜索建议
            jianyi(){
                this.axios({
                    method:"get",
                    url:"/search/suggest",
                    params:{
                        keywords:this.value,
                        type:"mobile"
                    }
                }).then((res)=>{
                    this.jianyi1=res.data.result.allMatch
                    console.log("这是搜索建议=>",res);
                })
            },
             //获取音乐id
            getId(e){
                this.SearchData.forEach((item)=>{
                    item.isplay=false
                })
                let p = this.$refs.audio
                e.isplay=!e.isplay
                if(this.url==e.id){
                    if(p.paused){
                        p.play()
                        return
                    }
                    e.isplay=!e.isplay
                    p.pause();
                    return
                }
                console.log(e);
                this.url=e.id
                p.play()
            },
        },
    };
</script>

<style lang="less" scoped>
.list-desc-top{
    font-size: 16px;
}
.play{
    width: 22px;
    height: 22px;
    img{
        width: 100%;
    }
}
.list-desc-bottom{
    margin-left: 10px;
}
.list-desc-bottom-box{
    display: flex;
    align-items: center;
    justify-content:space-between;

}
.list-desc-bottom-box div:nth-child(1){
    // margin-top: 4px;
    width: 10px;
    height: 10px;
    background: url('../assets/3.png') no-repeat 0 0;
	background-size: 166px 97px;
	width: 12px;
	height: 8px;
    align-items: center;
}
.list-icon{
	background: url('../assets/3.png') no-repeat -24px 0;
	background-size: 166px 97px;
	width: 22px;
	height: 22px;
}
.list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
    padding: 5px 10px 10px 0;
    border-bottom: 1px solid #cccccc;
}
    .text{
        margin-left: 10px;
        align-content: center;
        // border: 1px solid black;
    }
    .search-his-item{
        display: flex;
        font-size: 14px;
        margin-bottom: 8.5px;
        // margin-left: 10px;
        flex: 5;
        flex: wrap;
        align-content: flex-start;
        border-bottom: 1px solid #cccccc;

    }
    .del{
        display: flex;
        width: 13px;
        height: 13px;
        // margin-right: auto;
        margin-bottom: 8px;
        margin-top:8.5px ;
        margin-left: auto;
        margin-right: 18px;
        
    }
    .timepic img{
        margin-top: 8px;
        width: 15px;
        height: 15px;
         flex:1;
        // border: 1px solid black;

         
    }
    .search-his{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 30px 0 0 10px;
        line-height: 30px;
        // border: 1px solid black;

    }
    .hs{
        margin: 10px;
    }
    .Search-hot-item{
        font-size: 14px;
        padding: 0 14px;
        border: 1px solid #cccccc;
        margin: 0 8px 8px 10px;
        border-radius: 25px;
        text-align: center;
        line-height: 30px;
    }
    .Search-hot-items{
        display: flex;
        flex-wrap: wrap;
    }
    .Search{
        border-bottom: 1px solid #cccccc;
    }
    /deep/.van-search_content{
        background-color: #666;
    }
</style>